<template>
  <div>
    <div style="display: flex;justify-content: center;align-content: space-around">
      <el-row>
        <el-button icon="el-icon-search" @click="clickMe">搜索</el-button>
        <el-button icon="el-icon-search" @click="clickMeTwice">修改</el-button>
        <el-button icon="el-icon-search" @click="clickMeThird">添加</el-button>

        <el-col :span="24">
          <div class="grid-content bg-purple-dark">
            <el-table
                :data="tableData"
                highlight-current-row
                @current-change="handleCurrentChange"
                style="width: 100%">
              <el-table-column
                  prop="movieId"
                  label="电影编号"
                  width="180">
              </el-table-column>
              <el-table-column
                  prop="movieName"
                  label="电影名称"
                  width="180">
              </el-table-column>
              <el-table-column
                  prop="startTime"
                  label="放映时间"
                  width="180">
              </el-table-column>
              <el-table-column
                  prop="price"
                  label="价格">
              </el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button
                      size="mini"
                      type="danger"
                      @click="handleCheck(scope.$index,scope.row)">购买
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-col>
      </el-row>
    </div>
    <el-row>
      <el-col :span="24">
        <div class="grid-content bg-purple-dark">
          <div class="block">
            <el-pagination
                layout="prev, pager, next"
                :page-size=pageSize
                :current-page=currentPage
                :total=totalSize
                @current-change="currentPageFn">
            </el-pagination>
          </div>
        </div>
      </el-col>
    </el-row>


    <el-dialog
        title="搜索"
        :visible.sync="searchShow"
        width="30%">
      <el-form label-width="80px">
        <el-form-item label="电影名">
          <el-input v-model="movieName" size="50"></el-input>
          <el-button icon="el-icon-search" style="margin-left: 69%" @click="movieTicket">搜索</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog
        title="修改"
        :visible.sync="searchShowTwice"
        width="30%">
      <el-form label-width="80px">
        <el-form-item label="电影名">
          <el-input v-model="movieName" aria-placeholder="电影名" size="50"></el-input>
        </el-form-item>
        <el-form-item label="价格">
          <el-input v-model="price" aria-placeholder="价格" size="50"></el-input>
        </el-form-item>
        <el-form-item label="数量">
          <el-input v-model="numbers" aria-placeholder="票数量" size="50"></el-input>
        </el-form-item>
        <el-button icon="el-icon-search" style="margin-left: 69%" @click="movieUpdate">修改</el-button>
      </el-form>
    </el-dialog>
    <el-dialog
        title="添加"
        :visible.sync="searchShowThird"
        width="30%">
      <el-form label-width="80px">
        <el-form-item label="电影名">
          <el-input v-model="movieName" aria-placeholder="电影名" size="50"></el-input>
        </el-form-item>
        <el-date-picker
            v-model="startTime"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择日期时间">
        </el-date-picker>
        <el-form-item label="价格">
          <el-input v-model="price" aria-placeholder="价格" size="50"></el-input>
        </el-form-item>
        <el-form-item label="数量">
          <el-input v-model="numbers" aria-placeholder="票数量" size="50"></el-input>
        </el-form-item>
        <el-button icon="el-icon-search" style="margin-left: 69%" @click="movieAdd">新增</el-button>
      </el-form>
    </el-dialog>


  </div>
</template>

<script>
export default {
  name: "Ticket",
  data() {
    return {
      tableData: [],
      totalSize: 0,//总行数
      pageSize: 4,//当前显示数据条数
      currentPage: 1,//当前页码
      movieId: 0,
      searchShow: false,
      movieName: '',
      searchShowTwice: false,
      searchShowThird: false,
      startTime: '',
      price: 0,
      numbers: 0
    }
  },
  mounted() {
    this.movieTicket()
  },
  methods: {
    currentPageFn(currentPage) {
      this.currentPage = currentPage
      this.movieTicket()
    },
    movieTicket() {
      if (this.movieName == "") {
        this.movieName = "1"
      }
      this.$axios.get('ticketApi/ticket/findTicketByPage/' + this.movieName + "/" + this.currentPage + "/" + this.pageSize).then(
          r => {
            // console.log(r.data)
            this.tableData = r.data.list
            this.totalSize = r.data.total
            this.searchShow = false
          }
      )
    },
    handleCheck(index, row) {
      this.$axios.get('orderApi/order/addNewOrder/' + row.movieName + '/' + row.startTime + '/' + row.price + '/1').then(
          r => {
            console.log(r.data)
            alert("购票成功")
          }
      )
    },
    movieUpdate() {
      this.$axios.get('ticketApi/ticket/updateTicket/' + this.movieId + '/' + this.movieName + '/' + this.price + '/' + this.numbers).then(
          r => {
            console.log(r.data)
            this.movieId = 0;
            this.movieName = '1'
            this.startTime = ''
            this.price = 0
            this.numbers = 0
            this.searchShowTwice = false
            this.movieTicket();
          }
      )
    }, movieAdd() {
      this.$axios.get('ticketApi/ticket/addTicket/' + this.startTime + '/' + this.movieName + '/' + this.price + '/' + this.numbers).then(
          r => {
            console.log(r.data)
            this.movieId = 0;
            this.movieName = '1'
            this.startTime = ''
            this.price = 0
            this.numbers = 0
            this.searchShowThird = false
            this.movieTicket();
          }
      )
    },
    clickMe() {
      this.searchShow = true;
    },
    clickMeTwice() {
      this.searchShowTwice = true
    },
    clickMeThird() {
      this.searchShowThird = true
    },
    handleCurrentChange(val) {
      this.movieId = val.movieId;
      this.movieName = val.movieName
      this.startTime = val.startTime
      this.price = val.price
      this.numbers = val.count
    },
  }
}
</script>

<style scoped>

</style>
